import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import App from './page/App';

const Empty = ({ children }) => children;
const HomePage = props => <h1>Hello, welcome to home page!</h1>;
// const UserPage = props => <h2>This is user page!</h2>;
// const MenuPage = props => <h2>This is a menu page!</h2>;
// const EmptyPage = props => <Empty><h2>This is a empty page! 404</h2></Empty>

// const PrimaryLayout = props => {
//     return (
//         <Empty>
//             <header>Our React Router 4 App</header>
//             <Switch>
//                 <Route path="/" exact component={ HomePage } />
//                 <Route path="/users/menu" component={ MenuPage } />
//                 <Route path="/users" component={ UserPage } />
//                 <Route path="/empty" component={ EmptyPage } />
//                 <Redirect to="/empty" />
//             </Switch>
//         </Empty>
//     )
// }

const PrimaryHeader = props => {
    return (
        <ul>
            <li>Home</li>
            <li>Home</li>
            <li>Home</li>
            <li>Home</li>
        </ul>
    )
};

const UserNav = class extends React.Component {
    componentDidMount() {
        console.log('didmount');
    }
    componentWillUnmount() {
        console.log('willunmount');
    }

    render() {
        return <h1>UserNav Page</h1>;
    }
}
const BrowseUserTable = props => {
    return (
        <div style={{ backgroundColor: 'red' }}>
            <header>BrowseUserTable</header>
            <p>
                BrowseUserTable page
            </p>
        </div>
    )
};

const UserProfile = props => {
    console.log(props.match.url);
    console.log(props.match.path);
    return (
        <div>
            <h1>Hello, { props.match.params.userId }</h1>
        </div>
    )
}

const BrowseUsersPage = (props) => (
    <div className="user-sub-layout">
      <aside>
        <UserNav />
      </aside>
      <div className="primary-content">
        <Switch>
            <Route path={ props.match.path } exact component={ BrowseUserTable } />
            <Route path={ `${ props.match.path }/:userId` } component={ UserProfile } />
        </Switch>
      </div>
    </div>
);
  
  

const PrimaryLayout = props => {
    return (
      <div className="primary-layout">
        <PrimaryHeader />
        <main>
          <Switch>
            <Route path="/" exact component={ HomePage } />
            <Route path="/users" component={BrowseUsersPage} />
            <Redirect to="/" />
          </Switch>
        </main>
      </div>
    )
}

ReactDOM.render((
    <BrowserRouter>
        <PrimaryLayout />
    </BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();
